<template>
  <div>
    <h3>你好 -- {{ msg }}</h3>
    <a href="#">我是a</a>
    <ul>
      <!-- v-for必须加key，key的值有id给id，没id给下标 -->
      <!-- 这个id是属性一定叫id吗？不一定，可能叫别的名字，这里的id指的是他自己的唯一值 -->
      <!-- vscode里装了插件，而这个插件包含了eslint语法检查 -->
      <li v-for="item in list" :key="item.id">{{ item }}</li>
    </ul>

  
    <HelloWorld></HelloWorld>

    <!-- 在使用的时候可以把大驼峰拆成多个单词用-连接 -->
    <hello-world />

    <MyPanel />


    <MyPanel />
  </div>
</template>

<script>
// 导入  <!-- 根据标准语法规范，组件名必须是大驼峰 -->
import HelloWorld from './components/HelloWorld'

// 导入panel
import MyPanel from './components/MyPanel.vue'

// 组件化开发里，vue的数据放到
export default {
  // 注册成子组件
  components: {
    // 其实这是一个简写形式
    HelloWorld,
    MyPanel

    // 其实这个左边的key给它另起一个名字
    // xx: HelloWorld
  },
  data () {
    return {
      // 在这里面声明变量
      msg: '周彦祖',
      list: [
        { id: 1, name: 'jack' },
        { id: 2, name: 'jack2' },
        { id: 3, name: 'jack3' },
      ]
    }
  },
};
</script>

<style>
</style>